<template>
	<view class="login-wrapper">
		<view class="login-main">
			<view class="l-heading">
				<view class="l-title">登录</view>
				<view class="l-intro">
					<view class="t1">Hi ,欢迎登录</view>
					<view class="t2">湖南长沙市第一人民医院</view>
				</view>
			</view>
			<view class="l-card">
				<view class="u-cell">
					<u-field :border-bottom="false" :field-style="fieldStyle" label-width="0" v-model="mobile" placeholder="请输入手机号" >
						<view class="l-icon" slot="icon">
							<text class="iconfont icon-contextphone"></text>
						</view>
					</u-field>
				</view>
				<view class="u-cell">
					<u-field :border-bottom="false" label-width="0" v-model="pwd" placeholder="请输入密码" >
						<view class="l-icon" slot="icon">
							<text class="iconfont icon-lock"></text>
						</view>
					</u-field>
				</view>
				<view class="link-foot flex-center justify-zBetween">
					<navigator url="/pages/login/codeLogin" hover-class="none">手机验证码登录</navigator>
					<navigator url="/pages/login/register" hover-class="none">护士注册</navigator>
				</view>
			</view>
			<view class="l-footer">
				<u-button @click="openUrl('/pages/index/index')" type="primary" :custom-style="btnStyle">立即登录</u-button>
			</view>
		</view>
		<view class="ot-footer">
			<view class="ot-heading">第三方登录</view>
			<view class="flex-center justify-center">
				<text class="iconfont icon-login_"></text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile:'',
				pwd:'',
				btnStyle: {
					background:'#009fe8',
					color: '#ffffff',
					height:'98rpx',
					fontSize:'30rpx',
					borderRadius:"90rpx"
				},
				fieldStyle:{
					height:'60rpx'
				},
			}
		},
		onLoad() {
			
		},
		methods: {
			openUrl(e) {
				uni.switchTab({
					url:e
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-main{
		height: 1050rpx;
	}
	.ot-footer{
		text-align: center;
		.ot-heading{
			position: relative;
			font-size: 28rpx;
			margin-bottom: 30rpx;
			&::after{
				position: absolute;
				top: 50%;
				left: 50%;
				background-color: #cccccc;
				margin-left: 100rpx;
				content: '';
				width: 148rpx;
				height: 1px;
			}
			&::before{
				position: absolute;
				top: 50%;
				left: 50%;
				background-color: #cccccc;
				margin-left: -260rpx;
				content: '';
				width: 148rpx;
				height: 1px;
			}
		}
		.iconfont{
			color: #00c800;
			font-size: 80rpx;
		}
	}
	.l-card{
		background-color: #FFFFFF;
		box-shadow: 0 0 16px rgba(0,0,0,.1);
		border-radius: 10px;
		padding:40rpx;
		.u-cell{
			position: relative;
			margin: 0 -10px;
			margin-bottom:24rpx;
			&::after{
				content: " ";
				position: absolute;
				left: 10px;
				right: 10px;
				bottom: 0;
				box-sizing: border-box;
				border-bottom: 1px solid #e4e7ed;
				z-index: 2;
			}
		}
		
		.iconfont{
			color: #009fe8;
		}
	}
	
	.l-footer{
		padding: 0 30rpx;
		margin-top: 90rpx;
	}
	.link-foot{
		padding: 20rpx 10rpx;
		margin-top: 10rpx;
		navigator{
			color: #009fe8;
			font-size: 26rpx;
		}
	}
	.login-wrapper{
		background: url(../../static/images/logintop.png) center top no-repeat;
		background-size:contain;
		padding: 80rpx 30rpx 30rpx 30rpx;
		.l-heading{
			color: #FFFFFF;
			margin-bottom: 80rpx;
		}
		.l-title{
			font-size: 38rpx;
			margin-bottom: 110rpx;
		}
		.l-intro{
			.t1{
				font-size: 34rpx;
				margin-bottom:20rpx;
			}
			.t2{
				font-size: 24rpx;
			}
		}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</style>
